<template>
	<view class="loan">
		<view class=" p-30">
			<view class="title">
				基本信息
			</view>
			<view class="bg-fff br-10  m-b-20">
				<u-row customStyle="padding: 20rpx;color: #666;font-size: 25rpx;border-bottom: 1px solid #f7f8fa"
					v-for="item in infoList" :key="item.key">
					<u-col span="3">
						{{item.name}}
					</u-col>
					<u-col span="9">
						<text style="color: #333;">
							{{errorForm[item.key] || '--'}}
						</text>
					</u-col>
				</u-row>
			</view>
			<view class="title">
				申报内容
			</view>
			<view class="bg-fff br-10  m-b-20 p-20">
				<u-row customStyle="font-size: 26rpx;color: #333;padding: 20rpx 0;border-bottom: 1px solid #f7f8fa">
					<u-col span="3">
						故障仪器
					</u-col>
					<u-col span="9">
						<view style="display: flex;align-items: center;">
							<u--input v-model="errorForm.name" disabledColor="#ffffff" placeholder="请输入并选择仪器名称" border="none"
								@confirm="getList"></u--input>
							<u-icon name="arrow-down-fill" color="#C7C7CC" width="20" @click="getList"></u-icon>
						</view>
					</u-col>
				</u-row>
				<view class="content-name">
					<text style="color: red;">*</text>
					异常原因
				</view>
				<u--textarea v-model="errorForm.remark" placeholder="请输入内容" :showConfirmBar="false"></u--textarea>
				<text style="color: red;font-size: 22rpx;" v-show="!check">请输入异常原因</text>
			</view>
		</view>
		<view class="window-bottom">
			<u-button class="m-y-20" type="primary" text="提交申请" @click="onSubmit"></u-button>
		</view>
		<!-- <u-action-sheet :actions="columns" :show="show" @select="confirm" cancelText="取消"></u-action-sheet> -->
		<u-picker ref="uPicker" :show="show" :columns="columns" @confirm="onConfirm" @cancel="onCancel"
			keyName="nameDetail"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				check: true,
				show: false,
				errorForm: {
					instrumentsId: '',
					name: '',
					// 0:提交故障 1:解除故障
					approveStatus: 1,
					remark: ''
				},
				infoList: [{
						name: '借用人',
						key: 'realName'
					},
					{
						name: '联系方式',
						key: 'mobile'
					},
					{
						name: '申报日期',
						key: 'date'
					},
				],
				columns: []
			}
		},
		onLoad(option) {
			this.getUserInfo()
		},
		onPullDownRefresh() {
			this.info = {
				...this.info,
				date: new Date().Format('yyyy-MM-dd hh:mm:ss')
			}
			uni.stopPullDownRefresh()
		},
		methods: {
			onSubmit() {
				if (!this.errorForm.instrumentsId || !this.errorForm.remark) {
					this.check = false
					return
				}
				this.$api.addMalfunction(this.errorForm).then(res => {
					if (res.msg == 'success') {
						uni.switchTab({
							url: '/pages/malfunctionAudit/malfunctionAudit'
						})
					}
				})
			},
			getList() {
				this.$api.getDeviceList({
					status: '0,1,2',
					name: this.errorForm.name
				}).then(res => {
					if (res.msg == 'success') {
						this.columns = [res.data.map(item => {
							item.nameDetail = `${item.name}(${item.modelNumber})`
							return item
						})]
						this.show = true
					}
				})
			},
			onConfirm(e) {
				this.errorForm.name = e.value[0].name
				this.errorForm.instrumentsId = e.value[0].id
				this.onCancel()
			},
			onCancel() {
				this.show = false
			},
			// 获取用户信息
			getUserInfo() {
				const info = uni.getStorageSync('userInfo');
				if (info) {
					const obj = JSON.parse(info)
					this.errorForm.applicantId = obj.id
					this.errorForm.realName = obj.realName
					this.errorForm.mobile = obj.mobile
					this.errorForm.date = new Date().Format('yyyy-MM-dd hh:mm:ss')
					this.errorForm = {
						...this.errorForm
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.loan {
		.title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			padding-left: 12rpx;
			border-left: 2px solid #0E64FE;
			margin: 14rpx 0;
		}

		.content-name {
			font-size: 26rpx;
			color: #333;
			padding: 20rpx 0;
		}
	}
</style>